<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>移动端 冰箱</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/冰箱.css"/> -->
    <!-- <script src="js/冰箱.js"></script> -->

    <style type="text/css">
        #nav {
            display: flex;
            position: sticky;
            top: 0;
            left: 0;
        }
        
        #nav button {
            flex: 1;
            border: 0;
            height: 3rem;
            font-size: 1.2rem;
        }
        
        .active {
            color: #fff;
            background: red;
        }
        
        #main .box1 {
            display: none;
        }
        
        #main .box1.show {
            display: block;
        }
        
        .img {
            width: 50px;
        }
        
        .fav {
            width: 20px;
        }
        
        #main .box1>div {
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div id="box">
        <!--tab页-->
        <div id="nav"></div>
        <div id="main"></div>
    </div>


    <script src="js/冰箱.js"></script>
    <script>
        var nav = document.querySelector('#nav');
        var main = document.querySelector('#main');

        // 进入页面时, 进行获取本地存储的数据
        if (localStorage.obj20200818) {
            var list = JSON.parse(localStorage.obj20200818).list;
        } else {
            var obj20200818 = {
                list: []
            }
        }
        // console.log("list:", list);

        showNav(list);
        // 渲染tab页   导航页
        function showNav(list) {
            var cla = "";
            var str = "";
            for (var i = 0; i < list.length; i++) {
                if (list[i].is_show) {
                    cla = "active";
                } else {
                    cla = "";
                }
                str += `
							<button class=${cla} type="button" onclick="showList('${list[i].typeId}')">${list[i].type}</button>
						`;
            }
            nav.innerHTML = str;
            // tab页对应的内容显示   渲染页面
            showPage(list);
        }

        // 渲染页面
        function showPage(list) {
            var str = "";
            for (var i = 0; i < list.length; i++) {
                if (list[i].is_show) {
                    // 显示
                    str += "<div class='box1 show'>"
                } else {
                    // 隐藏
                    str += "<div class='box1'>"
                }
                for (var j = 0; j < list[i].products.length; j++) {
                    str += `
							<div>
								<img class="img" src="img/${list[i].products[j].img_url}" />
								<div>${list[i].products[j].name}</div>
								<div>¥${list[i].products[j].price}</div>
								收藏:
								<img class="fav" src="img/fav_${list[i].products[j].fav?'on':'off'}.png" onclick="fav(${list[i].products[j].id})" />
								<br />
								<button type="button" onclick="del(${list[i].products[j].id})">删除</button>
							</div>
						`;
                }
                str += '</div>'
            }
            main.innerHTML = str;
        }

        // tab切换
        function showList(id) {
            // console.log("id:", id);
            var list = JSON.parse(localStorage.obj20200818).list;
            for (var i = 0; i < list.length; i++) {
                if (id == list[i].typeId) {
                    list[i].is_show = true;
                } else {
                    list[i].is_show = false;
                }
            }
            var obj20200818 = {
                list: list
            }
            localStorage.obj20200818 = JSON.stringify(obj20200818);
            showNav(list);
        }

        // 收藏切换
        function fav(id) {
            // console.log("id:", id);
            var list = JSON.parse(localStorage.obj20200818).list;
            for (var i = 0; i < list.length; i++) {
                for (var j = 0; j < list[i].products.length; j++) {
                    if (id == list[i].products[j].id) {
                        list[i].products[j].fav = !list[i].products[j].fav;
                    }
                }
            }
            var obj20200818 = {
                list: list
            }
            localStorage.obj20200818 = JSON.stringify(obj20200818);
            showNav(list);
        }

        //删除
        function del(id) {
            // console.log('id:', id)
            // console.log('list:', list)
            for (var i = 0; i < list.length; i++) {
                for (var j = 0; j < list[i].products.length; j++) {
                    if (id == list[i].products[j].id) {
                        // console.log("123")
                        list[i].products.splice(j, 1);
                    }
                }
            }
            obj20200818 = {
                    list: list
                }
                // localStorage.obj20200818 = JSON.stringify(obj20200818);
            showNav(list);
        }
    </script>
</body>

</html>